/**
 * 滑动模块
 */
import { PIXIComponents } from "@/utils/PIXIComponents";
import ParameterMethod from "@/utils/ParameterMethod";
import store from "@/store";
class Regist extends PIXIComponents {
  public alloytouch: any;
  public maxlong: number;
  public option: any;
  public alloyTouch: any | null;
  public TimelineMax: any | null;
  public sencseline: any;
  constructor() {
    super();
    this.maxlong = -(10800 - 750);
    this.option = {
      touch: "#canvas-l",
      vertical: true,
      maxSpeed: 0.8,
      max: 0,
      min: this.maxlong,
      bindSelf: false,
      initialValue: 0,
      value: 0,
      change: this.callblack.bind(this),
    };
    this.alloyTouch = null;
    this.TimelineMax = new ParameterMethod.TimelineMax({ paused: true }); //总时间轴
  }
  /**
   * 滑动模块
   * @function handle 实例化
   * @function callblack 滑动回调
   * @function callblack 滑动回调
   * @param val 回调参数
   */
  // 滑动模块
  public async handle() {
    this.alloyTouch = new ParameterMethod.Alloytouch(this.option);
    this.timePlay();
  }
  // 滑动回调
  private callblack(val: any) {
    if (val <= 0 && val > this.maxlong) {
      const progress = val / this.maxlong;
      this.TimelineMax.seek(progress);
      this.animationPlay(progress);
    }
  }
  /**
   * 时间动画
   * @function timePlay 时间动画
   */

  timePlay() {
    // 总进度 Generalscenario为主容器
    const Generalscenario = ParameterMethod.stage.getChildByName(
      "Generalscenario"
    );
    const sencseTimeline = new ParameterMethod.TimelineMax({ delay: 0 });
    const sencsetween = new ParameterMethod.TweenMax(Generalscenario, 1, {
      x: this.maxlong,
    });
    sencseTimeline.add(sencsetween, 0);
    this.TimelineMax.add(sencseTimeline, 0);

    // 星星
    //星星显现 spriteGroupSences/sence1/p1Star
    const star = ParameterMethod.stage
      .getChildByName("Generalscenario")
      .getChildByName("p1")
      .getChildByName("p1star");
    const starStartTime = -10 / this.maxlong;
    const starDuringTime = -30 / this.maxlong;
    const starTimleline = new ParameterMethod.TimelineMax({
      delay: starStartTime,
    });
    const starTween = new ParameterMethod.TweenMax.to(star, starDuringTime, {
      alpha: 1,
    });
    starTimleline.add(starTween, 0);
    this.TimelineMax.add(starTimleline, 0);

    //房子放大 spriteGroupSences/sence1      spriteGroupSences/sence2
    const house = ParameterMethod.stage
      .getChildByName("Generalscenario")
      .getChildByName("p1");
    const houseStartTime = -300 / this.maxlong;
    const houseDuringTime = -200 / this.maxlong;
    const houseTimeline = new ParameterMethod.TimelineMax({
      delay: houseStartTime,
    });
    const houseTween = new ParameterMethod.TweenMax.to(
      house.scale,
      houseDuringTime,
      {
        x: 3,
        y: 3,
      }
    );
    const houseTween2 = new ParameterMethod.TweenMax.to(
      house,
      houseDuringTime,
      { alpha: 0 }
    );
    houseTimeline.add(houseTween, 0);
    houseTimeline.add(houseTween2, 0);
    this.TimelineMax.add(houseTimeline, 0);

    //

    // const sence2 = ParameterMethod.stage
    //   .getChildByName("Generalscenario")
    //   .getChildByName("p1");
    // const sence2StartTime = -680 / this.maxlong;
    // const sence2DuringTime = -100 / this.maxlong;
    // const sence2Timeline = new ParameterMethod.TimelineMax({
    //   delay: sence2StartTime,
    // });
    // const sence2Tween = new ParameterMethod.TweenMax.to(
    //   sence2,
    //   sence2DuringTime,
    //   { alpha: 1 }
    // );
    // sence2Timeline.add(sence2Tween, 0);
    // this.TimelineMax.add(sence2Timeline, 0);
  }
  /**
   * 帧动画
   * @function animationPlay 、
   * @param progress 进度
   */
  animationPlay(progress: number) {
    //孩子蹒跚学走路 spriteGroupSences/sence2/p2Child
    //图片数组 p2Arr2
    const childStepStartTime = -600 / this.maxlong;
    const childDuringTime = -1300 / this.maxlong;

    if (progress >= childStepStartTime) {
      const childNum = 34;
      const childIndex = Math.floor(
        ((progress - childStepStartTime) / childDuringTime) * childNum
      );
      console.log("body" + (childIndex + 10));
      console.log(store.state.StoreSprite["body" + (childIndex + 1)]);
      ParameterMethod.stage
        .getChildByName("Generalscenario")
        .getChildByName("p2")
        .getChildByName("w1").texture =
        store.state.StoreSprite["body" + (childIndex + 1)].texture;

      //旋涡，并出现扣题文字 spriteGroupLast/bgLast
      //p5Arr
      // let xunStartTime = -6613 / maxLong;
      // let xunDuringTime = -1000 / maxLong;

      // if (progress >= xunStartTime) {
      //   let xunNum = p5Arr.length;
      //   let xunIndex = Math.floor(
      //     ((progress - xunStartTime) / xunDuringTime) * xunNum
      //   );
      //   if (xunIndex < xunNum && xunIndex >= 0) {
      //     app.stage
      //       .getChildByName("spriteGroupLast")
      //       .getChildByName("bgLast").texture = new PIXI.Texture.fromImage(
      //       p5Arr[xunIndex]
      //     );
      //   }
      // }
    }
  }
}
export default new Regist();
